<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :sm="24" :md="24" :lg="20">
              <MmvTitle title="基本信息"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" class="table-padding">
              <el-descriptions
                :column="2"
                border
                :labelStyle="{ width: '120px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
                  <template slot="label">微信昵称</template>
                  {{ form.vxName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">客户名称</template>
                  {{ form.memberName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">手机号</template>
                  {{ form.memberPhone }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">注册时间</template>
                  {{ form.registerTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">邀请人姓名</template>
                  {{ form.inviterName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">邀请人电话</template>
                  {{ form.inviterPhone }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">所属租户</template>
                  {{ form.tenantName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">加入时间</template>
                  {{ form.joinTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">备注</template>
                  {{ form.remark }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20">
              <MmvTitle title="收益明细"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
              <el-form-item label="总计订单" prop="orderCount">
                <el-input
                  v-model="form.orderCount"
                  maxlength="50"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
              <el-form-item label="成交金额" prop="totalAmount">
                <el-input
                  v-model="form.totalAmount"
                  maxlength="50"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
              <el-form-item label="累计收益" prop="totalIncome">
                <el-input
                  v-model="form.totalIncome"
                  maxlength="50"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20">
              <el-table
                v-loading="loading"
                :data="returnsDetailedList"
                height="300px"
                border
              >
                <el-table-column
                  label="订单编号"
                  align="center"
                  min-width="150px"
                  show-overflow-tooltip
                  prop="orderNo"
                />
                <el-table-column
                  label="类目"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="associationModeName"
                />
                <el-table-column
                  label="成交金额"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="businessPrice"
                />
                <el-table-column
                  label="成交时间"
                  align="center"
                  min-width="160px"
                  show-overflow-tooltip
                  prop="tradingHours"
                />
                <el-table-column
                  label="收益金额"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="earningsAmount"
                />
                <el-table-column
                  label="分销等级"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="fsInfo"
                />
                <el-table-column
                  label="买家昵称"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="buyersVxName"
                />
                <el-table-column
                  label="买家名称"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="buyersMemberName"
                />
                <el-table-column
                  label="买家联系方式"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="buyersMemberPhone"
                />
                <el-table-column
                  label="所属租户"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="tenantName"
                />
              </el-table>

              <pagination
                :total="totalDetailed"
                :page.sync="detaileParams.pageNum"
                :limit.sync="detaileParams.pageSize"
                @pagination="detailedList"
              />
            </el-col>
            <el-col :sm="24" :md="24" :lg="20">
              <MmvTitle title="提现明细"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
              <el-form-item label="累计收益" prop="totalIncome">
                <el-input
                  v-model="form.totalIncome"
                  maxlength="50"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
              <el-form-item label="剩余金额" prop="balance">
                <el-input
                  v-model="form.balance"
                  maxlength="50"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
              <el-form-item label="累计提现" prop="totalWithdrawalAmount">
                <el-input
                  v-model="form.totalWithdrawalAmount"
                  maxlength="50"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20">
              <el-table
                v-loading="loading"
                :data="withdrawalRecordList"
                height="300px"
                border
              >
                <el-table-column
                  label="申请时间"
                  align="center"
                  min-width="160px"
                  show-overflow-tooltip
                  prop="applyTime"
                />
                <el-table-column
                  label="申请金额"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="applyAmount"
                />
                <el-table-column
                  label="收款人"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="payee"
                />
                <el-table-column
                  label="收款账号"
                  align="center"
                  min-width="150px"
                  show-overflow-tooltip
                  prop="paymentAccount"
                />
                <el-table-column
                  label="流水号"
                  align="center"
                  min-width="150px"
                  show-overflow-tooltip
                  prop="serialNumber"
                />
                <el-table-column
                  label="交易时间"
                  align="center"
                  min-width="160px"
                  show-overflow-tooltip
                  prop="tradingHours"
                />
                <el-table-column
                  label="交易渠道"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="tradingChannel"
                  :formatter="tradingChannel"
                />
                <el-table-column
                  label="提现状态"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="wthdrawalState"
                  :formatter="wthdrawalState"
                />
                <el-table-column
                  label="操作人"
                  align="center"
                  min-width="120px"
                  show-overflow-tooltip
                  prop="operator"
                />
              </el-table>

              <pagination
                :total="totalWithdrawal"
                :page.sync="withdrawalParams.pageNum"
                :limit.sync="withdrawalParams.pageSize"
                @pagination="withdrawalList"
              />
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import {
  getBasic,
  listDetailed,
  listWithdrawal,
} from '@/api/marketing/customer'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import CustomContent from '@/components/custom/content.vue'
export default {
  name: 'carsave',
  dicts: [],
  components: {
    MmvTitle,
    CustomContent,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      //收益明细
      returnsDetailedList: [],
      totalDetailed: 0,
      //收益
      detaileParams: {
        pageNum: 1,
        pageSize: 10,
        memberNo: null,
      },
      //提现明细
      withdrawalRecordList: [],
      //提现
      withdrawalParams: {
        pageNum: 1,
        pageSize: 10,
        memberNo: null,
      },
      totalWithdrawal: 0,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      subordinateTable: 'first',
    }
  },
  created() {
    this.handleDetail(this.$route.query.id)
  },
  methods: {
    wthdrawalState(row, column) {
      switch (row.wthdrawalState) {
        case 1:
          return '申请中'
          break
        case 2:
          return '待打款'
          break
        case 3:
          return '打款中'
          break
        case 4:
          return '已提现'
          break
        case 5:
          return '提现失败'
          break
        case 6:
          return '提现驳回'
          break
        default:
          return '--'
          break
      }
    },
    tradingChannel(row, column) {
      switch (row.tradingChannel) {
        case 1:
          return '微信'
          break
        case 2:
          return '支付宝'
          break
        case 3:
          return '线下转账'
          break
        case 4:
          return '人工付款'
          break
        default:
          return '--'
          break
      }
    },
    /** 详情按钮操作 */
    handleDetail(id) {
      getBasic(id).then((response) => {
        this.form = response.data
        this.detail = true
        this.title = '分销伙伴详情'
        this.detaileParams.memberNo = id
        ;(this.totalDetailed = 0),
          (this.totalWithdrawal = 0),
          this.detailedList()
        this.withdrawalParams.memberNo = id
        this.withdrawalList()
      })
    },
    //收益明细
    detailedList() {
      this.loading = true
      listDetailed(this.detaileParams).then((response) => {
        this.returnsDetailedList = response.rows
        this.totalDetailed = response.total
        this.loading = false
      })
    },
    //提现明细
    withdrawalList() {
      this.loading = true
      listWithdrawal(this.withdrawalParams).then((response) => {
        this.withdrawalRecordList = response.rows
        this.totalWithdrawal = response.total
        this.loading = false
      })
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
  },
}
</script>
